<template>
	<el-pagination background class="sw-pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="curPage"
		:page-sizes="pageSizes" :page-size.sync="pageSize" :layout="layout" :total="total">
		<span class="el-pagination__total">共 {{ total }} 条{{ notice }}</span>
	</el-pagination>
</template>

<script>
export default {
	name: 'swPagination',
	props: {
		total: {
			require: true,
			type: Number
		},
		page: {
			require: true,
			type: Number,
			default: 1
		},
		limit: {
			require: true,
			type: Number,
			default: 15
		},
		pageSizes: {
			type: Array,
			default () {
				return [15, 30, 60, 120];
			}
		},
		layout: {
			type: String,
			default: 'slot, sizes, prev, pager, next, jumper'
		},
		notice: {
			type: String,
			default: '数据'
		}
	},
	data() {
		return {};
	},
	computed: {
		curPage: {
			get() {
				return this.page;
			},
			set(val) {
				this.$emit('update:page', val);
			}
		},
		pageSize: {
			get() {
				return this.limit;
			},
			set(val) {
				this.$emit('update:limit', val);
			}
		}
	},
	methods: {
		handleSizeChange(val = this.limit) {
			this.$emit('change');
		},
		handleCurrentChange(val = this.page) {
			this.$emit('change');
		}
	}
};
</script>

<style lang="scss" scoped>
.el-pagination::v-deep {
	display: flex;
	padding: 0;
	font-size: 0;
	line-height: 0;
	margin-top: 16px;
	flex-shrink: 0;

	.el-pagination__total {
		flex: 1;
		overflow: hidden;
		font-weight: normal;
	}
	
	.el-pagination__jump {
		margin-left: 16px;
	}

	&.is-background {
		.btn-prev {
			margin-left: 0;
		}

		.btn-next {
			margin-right: 0;
		}
	}
}
</style>